<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>HTML5事件</title>
	<style type="text/css">
		#myDiv{
			width:800px;
			margin: 0 auto;
		}
		#myMenu{
			position: absolute;
			top: 20px;
			left: 285px;
			visibility: hidden; 
			background-color: silver;
		}
	</style>
</head>
<body>
	<div id="myDiv">右击得到客户信息菜单</div>
	<ul id="myMenu">
		<li>Vicky</li>
		<li>johny</li>
		<li>monika</li>
		<li>jay</li>
	</ul>
	<script type="text/javascript" src="../Code/event.js"></script>
	<script type="text/javascript">
	//readystatechange事件,确定外部js是否加载完毕
	EventUtil.addHandler(window, "load", function () {
		var script = document.createElement("script");
		EventUtil.addHandler(script, "readystatechange", function (event) {
			var event = EventUtil.getEvent(event);
			var target = event.getTarget(event);
			if (target.readyState == "loaded" || target.readyState == "complete") {
				EventUtil.removeHandler(target, "readystatechange", arguments.callee);
				alert("event.js is loaded");
			}
		});
		script.src = "test.js";
		document.body.appendChild(script);
	})
	//readystatechange 事件，确定外部css是否加载完毕
	EventUtil.addHandler(window, "load", function () {
		var link = document.createElement("link");
		link.type = "text/css";
		link.rel = "stylesheet";

		EventUtil.addHandler(link,"readystatechange", function (event) {
			var event = EventUtil.getEvent(event);
			var target = EventUtil.getTarget(event);

			if (target.readyState == "loaded" || target.readyState == "complete") {
				EventUtil.removeHandler(target, "readystatechange", arguments.callee);
			}
		});
		link.href = "test.css";
		document.getElementsByTagName("head")[0].appendChild(link);
	})
	//contextmenu事件
	EventUtil.addHandler(window,"load",function (event) {
		var div = document.getElementById("myDiv");
		EventUtil.addHandler(div, "contextmenu", function (event) {
			event = EventUtil.getEvent(event);
			EventUtil.preventDefault(event);
			var menu = div.nextElementSibling;
			menu.style.left = event.clientX + "px";
			menu.style.right = event.clientY + "px";
			menu.style.visibility = "visible";
		});
		EventUtil.addHandler(document, "click", function (event) {
			document.getElementById("myMenu").style.visibility = "hidden";
		})
	});
	

	</script>
</body>
</html>